<template>
    <div class="head">
        <div class="left">
            <el-avatar size="large" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
           
            <h1>企业后台管理系统</h1>
        </div>

        <div class="right">
            <span>{{name}}</span>
            <i class="el-icon-s-custom" style="font-size:30px"></i>   
            <el-dropdown>                
            <span class="el-dropdown-link">
                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            name:'1'
        }
    },
    mounted(){
     console.log(2)
    },
    created(){
       console.log(1)
       this.getName()
    },
   
    methods:{
        getName(){
           this.name= localStorage.getItem("userLogin")
        }
    }

}
</script>

<style lang="less" scoped>

.head{
    display: flex;
   justify-content: space-between;
   padding: 0 30px;
   .left{
      display: flex;
      align-items: center;
   }
   
    .right{
        display: flex;
        align-items: center;
    }
   

}


</style>